<div class="main">
	<div style="vertical-align: middle;margin-bottom:10px;">
	  <span><b>全局阈值:</b></span>
	</div>
	<table class="table table-striped table-hover">
		<thead>
			<tr class="text-center ">
				<td data-toggle="tooltip" title="从broker维度检测，堆积多久预警，单位毫秒，默认为5分钟">堆积时间</td>
				<td data-toggle="tooltip" title="堆积时间和堆积数量是&&的关系">堆积数量</td>
				<td data-toggle="tooltip" title="从客户端维度检测，阻塞多久预警，单位毫秒">阻塞时间</td>
				<td data-toggle="tooltip" title="每小时消费失败超过此数值就预警">消费失败数量</td>
				<td>报警频率限制</td>
				<td>是否接收报警</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
            <#if !response.OK || !response.result.defaultConfig??>
			     <tr>
                    <td colspan="8"class="text-center" >
                    	暂无数据
                    </td>
                <tr>
			<#else>
			    <#assign defaultConfig = response.result.defaultConfig>
				<tr class="text-center ">
					<td data-toggle="tooltip" title="堆积时间超过${defaultConfig.accumulateTimeShow}ms并且堆积量超过${defaultConfig.accumulateCountShow}触发【堆积预警】">${defaultConfig.accumulateTimeShow}</td>
					<td data-toggle="tooltip" title="堆积时间超过${defaultConfig.accumulateTimeShow}ms并且堆积量超过${defaultConfig.accumulateCountShow}触发【堆积预警】">${defaultConfig.accumulateCountShow}</td>
					<td data-toggle="tooltip" title="客户端阻塞超过${defaultConfig.blockTimeShow}ms触发【客户端阻塞预警】">${defaultConfig.blockTimeShow}</td>
					<td data-toggle="tooltip" title="消费者每小时消费失败超过${defaultConfig.consumerFailCountShow}触发【消费失败预警】">${defaultConfig.consumerFailCountShow}</td>
					<td>${defaultConfig.spliceWarnFrequency()}</td>
					<td>${(defaultConfig.ignoreWarn==0)?string('是','否')}</td>
					<td><button type="button" onclick="updateAlarmConfig('${defaultConfig.consumer}',false)" class="btn btn-success"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button></td>
				</tr>
			</#if>
		</tbody>
	</table>
	<div style="vertical-align: middle;margin-bottom:10px;">
	  <span><b>自定义阈值:</b></span>
	  <button type="button" onclick="addAlarmConfig()" class="btn btn-success"><span class="glyphicon glyphicon-plus" aria-hidden="true">配置</span></button>
	</div>
	<table class="table table-striped table-hover">
		<thead>
			<tr class="text-center ">
				<td>序号</td>
				<td>消费者</td>
				<td data-toggle="tooltip" title="从broker维度检测，堆积多久预警，单位毫秒">堆积时间</td>
				<td data-toggle="tooltip" title="堆积时间和堆积数量是&&的关系">堆积数量</td>
				<td data-toggle="tooltip" title="从客户端维度检测，阻塞多久预警，单位毫秒">阻塞时间</td>
				<td data-toggle="tooltip" title="每小时消费失败超过此数值就预警">消费失败数量</td>
				<td>报警频率限制</td>
				<td>是否接收报警</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
            <#if !response.OK || !response.result.alarmConfig??>
			     <tr>
                    <td colspan="9"class="text-center" >
                    	暂无数据
                    </td>
                <tr>
			<#else>
			    <#list response.result.alarmConfig as alarmConfig>
					<tr class="text-center ">
						<td>${alarmConfig_index+1}</td>
						<td>${alarmConfig.consumer}</td>
						<td data-toggle="tooltip" title="堆积时间超过${alarmConfig.accumulateTime!response.result.defaultConfig.accumulateTimeShow}ms并且堆积量超过${alarmConfig.accumulateCount!response.result.defaultConfig.accumulateCountShow}触发【堆积预警】">${alarmConfig.accumulateTimeShow}</td>
						<td data-toggle="tooltip" title="堆积时间超过${alarmConfig.accumulateTime!response.result.defaultConfig.accumulateTimeShow}ms并且堆积量超过${alarmConfig.accumulateCount!response.result.defaultConfig.accumulateCountShow}触发【堆积预警】">${alarmConfig.accumulateCountShow}</td>
						<td data-toggle="tooltip" title="客户端阻塞超过${alarmConfig.blockTime!response.result.defaultConfig.blockTimeShow}ms触发【客户端阻塞预警】">${alarmConfig.blockTimeShow}</td>
						<td data-toggle="tooltip" title="消费者每小时消费失败超过${alarmConfig.consumerFailCount!response.result.defaultConfig.consumerFailCountShow}触发【消费失败预警】">${alarmConfig.consumerFailCountShow}</td>
						<td data-toggle="tooltip" title="报警频率默认为${alarmConfig.spliceWarnFrequency()!response.result.defaultConfig.spliceWarnFrequency()}">${alarmConfig.spliceWarnFrequency()!}</td>
						<td>${(alarmConfig.ignoreWarn==0)?string('是','否')}</td>
						<td>
							<button type="button" onclick="updateAlarmConfig('${alarmConfig.consumer}',true)" class="btn btn-success"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
						 	<button type="button" onclick="deleteAlarmConfig('${alarmConfig.consumer}')" class="btn btn-warning"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
						</td>
					</tr>		    		
				</#list>
			</#if>
		</tbody>
	</table>
	<div style="vertical-align: middle;margin-bottom:10px;">
	  <span><b>监控列表:</b></span>
	</div>
	<table class="table table-striped table-hover" style="margin-top: 0px;word-break:break-all; word-wrap:break-all;">
    	<thead>  
			<colgroup>
			  <col>
			  <col>
			  <col width='160px'>
			  <col width='80px'>
			  <col width='70px'>
			  <col>
			  <col width='150px'>
			  <col>
			</colgroup>
            <tr>  
              <td>消费者</td>
              <td>topic</td>
              <td>监控收集时间</td>
              <td data-toggle="tooltip" title="堆积总消息数">总堆积量</td>
              <td data-toggle="tooltip" title="单队列最大堆积消息数">堆积量</td>
              <td data-toggle="tooltip" title="消费延迟时间(相对于broker最新生产的消息时间)">滞后时间</td>
              <td data-toggle="tooltip" title="同一个ConsumerGroup订阅不同topic">订阅错误</td>
              <td data-toggle="tooltip" title="有消息且超过1分钟未消费认为发生过阻塞">历史详情</td>
            </tr>  
          </thead>  
          <tbody>
             <#if !response.OK || !response.result.consumerStat??>
			     <tr>
                    <td colspan="8"class="text-center" >
                    	暂无数据
                    </td>
                <tr>
			<#else>
				<#list response.result.consumerStat as consumerStat>
				<tr>
					<td>${consumerStat.consumerGroup}</td>
					<td><a href="${request.contextPath}/user/topic/${consumerStat.tid}/detail?tab=consume">${consumerStat.topic!}</a></td>
					<td>${consumerStat.updatetime?string("yyyy-MM-dd HH:mm:ss")}</td>
					<td>
						<#if consumerStat.undoneMsgCount??>
							${consumerStat.undoneMsgCount?number?string(",###")}
						</#if>
					</td>
					<td>
						<#if consumerStat.undone1qMsgCount??> 
							${consumerStat.undone1qMsgCount?number?string(",###")}
						</#if>
					</td>
					<td>
						<#if consumerStat.undoneDelay gt 1000>
							${(consumerStat.undoneDelay/1000)?string(",###.###")}秒
						<#elseif consumerStat.undoneDelay gt 0>
							${consumerStat.undoneDelay?string(",###.###")}毫秒
						<#else>
							无滞后
						</#if>
					</td>
					<td>${consumerStat.sbscription!"无错误"}</td>
					<td>
						<#if consumerStat.blockList??>
							<button class="btn btn-success" data-toggle="modal" data-target="#${consumerStat.consumerGroup}">查看</button>
		      		         <div class="modal fade text-center" id="${consumerStat.consumerGroup}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						    	<div class="modal-dialog" style="display: inline-block; width: auto;">
							        <div class="modal-content">
							            <div class="modal-header">
							                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							                <h5 class="modal-title" id="myModalLabel">${consumerStat.consumerGroup}</h5>
							            </div>
							            <div class="modal-body">
								            <table class="table table-bordered table-hover">  
								                  <thead>  
								                    <tr>  
								                      <th>clientId</th>
								                      <th>broker</th>
								                      <th>qid</th>
								                      <th>监控收集时间</th>
								                      <th data-toggle="tooltip" title="相对于当前时间">阻塞时间</th>
								                      <th>偏移量错误时间</th>
								                      <th>偏移量错误次数</th>
								                    </tr>  
								                  </thead>  
								                  <tbody>
								                  	 <#list consumerStat.blockList as consumerBlock>
								                  	 	<tr>
														  	<td>${consumerBlock.instance!}</td>
														  	<td>${consumerBlock.broker!}</td>
														  	<td>${consumerBlock.qid}</td>
					    								    <td>${consumerBlock.updatetime?string("yyyy-MM-dd HH:mm:ss")}</td>
					    								    <td>${consumerBlock.blockTime}秒</td>
					    								    <td>
					    								    	<#if consumerBlock.offsetMovedTime?? && consumerBlock.offsetMovedTime gt 0>
						    								    ${consumerBlock.offsetMovedTime?number_to_datetime?string("yyyy-MM-dd HH:mm:ss")}</td>
					    								    	</#if>
					    								    <td>
					    								    	<#if consumerBlock.offsetMovedTimes gt 0>
					    								    		${consumerBlock.offsetMovedTimes}
					    								    	</#if>
					    								    </td>
				    								     </tr>
								                  	 </#list>
			    								  </tbody>
			    						 	</table>
							            </div><!-- /.modal-body -->
							        </div><!-- /.modal-content -->
							    </div><!-- /.modal -->
							</div>
						<#else>
							暂无
						</#if>
					</td>
				</tr>
				</#list>
			</#if>
            </tbody>
      </table>
</div>
<!-- 修改配置报警阈值 -->
<div id="updateAlarmThresholdModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">报警阈值配置</h4>
			</div>
			<form class="form-horizontal form-bordered form-row-stripped" id="updateAlarmThresholdForm">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-body">
								<div class="form-group" id="consumerInputID">
									<label class="control-label col-md-4"> 消费者: </label>
							        <div class="col-md-5">
										<select id="consumerSearchSelect" class="selectpicker" title="请选择" data-live-search-placeholder="搜索" name="consumer" data-live-search="true"></select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-4"> 接收报警: </label>
									<div class="col-md-5 checkbox">
										<label>
										    <input type="radio" name="ignoreWarn" value="0">是
										</label>
										<label data-toggle="tooltip" title="此选项优先级较高，会使下面配置失效，请谨慎使用">
										    <input type="radio" name="ignoreWarn" value="1">否
										</label>
									</div>
								</div>
								<div class="form-group" id="accumulateTimeID">
									<label class="control-label col-md-4"> 堆积: </label>
							        <div class="col-md-5">
							        	<div class="input-group">
											<input type="text" id="accumulateTimeInput" name="accumulateTime" 
											 data-toggle="modal" title="堆积时间 ，默认 300000毫秒" class="form-control" />
											<span class="input-group-addon">毫秒</span>
	    								</div>
									</div>
								</div>
								<div class="form-group" id="accumulateCountID">
										<label class="control-label col-md-4"> </label>
							        <div class="col-md-5">
							        	<div class="input-group">
											<input type="text" id="accumulateCountInput" name="accumulateCount"
											data-toggle="modal" title="堆积数量，默认 10000条" class="form-control" />
											<span class="input-group-addon">条</span>
	    								</div>
									</div>
								</div>
								<div class="form-group" id="blockTimeID">
									<label class="control-label col-md-4"> 阻塞: </label>
									<div class="col-md-5">
										<div class="input-group">
											<input type="text" id="blockTimeInput" name="blockTime" 
											data-toggle="modal" title="阻塞时间，默认 10000毫秒" class="form-control" />
											<span class="input-group-addon">毫秒</span>
	    								</div>
									</div>
								</div>
								<div class="form-group" id="consumerFailCountrID">
									<label class="control-label col-md-4"> 消费失败: </label>
									<div class="col-md-5">
										<div class="input-group">
											<input type="text" id="consumerFailCountrInput" name="consumerFailCount" 
											data-toggle="modal" title="消费失败数量，默认 10 条" class="form-control" />
											<span class="input-group-addon">条</span>
	    								</div>	
									</div>
								</div>
								<div class="form-group" id="warnFrequencyID">
									<label class="control-label col-md-4"> 报警频率限制: </label>
									<div class="col-md-5">
										<div class="input-group">
											<input type="text" id="warnUnitTimeInput" 
											name="warnUnitTime" class="form-control" />
											<span class="input-group-addon">小时</span>
											
											<input type="text" id="warnUnitCountInput" 
											name="warnUnitCount" class="form-control" />
											<span class="input-group-addon">次数</span>
	    								</div>
									</div>
								</div>
								<input type="hidden" id="isAddAlarmRecord" />
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >取消</button>
					<button type="button" class="btn btn-primary" onclick="submitUpdateAlarmThreshold()" id="updateAlarmThresholdBtn">确定</button>
				</div>
			</form>
		</div>
	</div>
</div>
<!-- 删除提示 -->
<div class="modal fade" id="deleteAlarmModal" aria-hidden="true">  
  <div class="modal-dialog">  
    <div class="modal-content message_align">  
      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>  
        <h4 class="modal-title">确定要删除报警配置吗？</h4>  
      </div>  
		<form class="form-horizontal form-bordered form-row-stripped">
			<div class="modal-body">
				<div class="row">
					<!-- 控件开始 -->
					<div class="col-md-12">
						<!-- form-body开始 -->
						<div class="form-body">
							<div class="form-group">
								<label class="control-label col-md-3"> 消费者: </label>
								<div class="col-md-5">
									<input type="text" id="currentDeleteConsumer" class="form-control" readonly="readonly"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" data-dismiss="modal" class="btn" >取消</button>
				<button type="button" id="deleteAlarmBtn" onclick="submitDeleteAlarm()" class="btn btn-primary">确定</button>
			</div>
		
		</form>
    </div>
  </div>
</div>
<script>
$(function () {
$("[data-toggle='tooltip']").tooltip({container: 'body'});
//初始化consumer列表
$.get('${request.contextPath}/consumer/list/all',
        function(data){
            if(data.status == 200){
            	var content = "";
            	for(var i in data.result){
            		var consumer = data.result[i];
            		content += "<option value='"+consumer.name+"'>"+consumer.name+"</option>";
            	}
        		$("#consumerSearchSelect").html(content);
        		$("#consumerSearchSelect").selectpicker('refresh');
		    }else{
		    	toastr.error("数据获取失败！"+data.message);  
		    }
    }, 'json');
});
// 提交更新或添加请求
function submitUpdateAlarmThreshold(){
		if($("#isAddAlarmRecord").val() == 0){
			if(!$("#consumerSearchSelect").val()){
				alert("请选择消费者");
				return;
			}
		}
		if((!$("#warnUnitTimeInput").val() && $("#warnUnitCountInput").val())
				|| ($("#warnUnitTimeInput").val() && !$("#warnUnitCountInput").val())){
			alert("报警频率限制中，有一项未填写");
			return;
		}
		if($("#warnUnitTimeInput").val() && $("#warnUnitCountInput").val()){
			if($("#warnUnitTimeInput").val() <= 0 || $("#warnUnitCountInput").val() <= 0){
				alert("报警频率限制中，两个选项均要大于0");
				return;
			}
		}
		disable("updateAlarmThresholdBtn");
		$.post('${request.contextPath}/admin/alarm/config/add/',
				$("#updateAlarmThresholdForm").serialize(),
		        function(data){
		            if(data.status == 200){
						toastr.success("操作成功，即将刷新页面");  
						reload(2000); 
				    }else{
				    	toastr.error("操作失败！"+data.message);  
			            enable("updateAlarmThresholdBtn");
				    }
		        }, 'json');
}
//修改报警配置
function updateAlarmConfig(consumer,flag){
	$.get('${request.contextPath}/admin/alarm/config/detail',
			{
				consumer:consumer
			},
	        function(data){
	            if(data.status == 200){
	            	$("#isAddAlarmRecord").val(1);
	            	$("input[name='ignoreWarn'][value='"+data.result.ignoreWarn+"']").prop("checked",true);
	            	$("#accumulateTimeInput").val(data.result.accumulateTime == null ? '':data.result.accumulateTime);
	            	$("#accumulateCountInput").val(data.result.accumulateCount == null ? '':data.result.accumulateCount);
	            	$("#blockTimeInput").val(data.result.blockTime == null ? '':data.result.blockTime);
	            	$("#warnUnitCountInput").val(data.result.warnUnitCount == null ? '':data.result.warnUnitCount);
	            	$("#warnUnitTimeInput").val(data.result.warnUnitTime == null ? '':data.result.warnUnitTime);
	            	$("#consumerFailCountrInput").val(data.result.consumerFailCount == null ? '':data.result.consumerFailCount);
	            	//区分配置和默认配置
	            	if(flag){
		            	$("#consumerSearchSelect").val(data.result.consumer).trigger('change');
	            		$("#consumerInputID").removeClass("hide");
	            	}else{//默认
	            		$("#consumerInputID").addClass("hide");
		            	$("#consumerSearchSelect").selectpicker('refresh');
	            	}
			    }else{
			    	toastr.error("数据获取失败！"+data.message);  
			    }
        }, 'json');
	$("#updateAlarmThresholdModal").modal('show');
}
//删除报警配置
function deleteAlarmConfig(consumer){
	$("#currentDeleteConsumer").val(consumer);
	$("#deleteAlarmModal").modal('show');
}
//提交删除请求
function submitDeleteAlarm(){
	disable("deleteAlarmBtn");
	$.post('${request.contextPath}/admin/alarm/config/delete',
			{
				consumer : $("#currentDeleteConsumer").val()
			},
	        function(data){
	            if(data.status == 200){
	            	toastr.success("操作成功，即将刷新页面");  
					reload(3000);    	
			    }else{
			    	toastr.error("数据获取失败！"+data.message);  
	            	enable("deleteAlarmBtn");
			    }
        }, 'json');
}
//添加报警
function addAlarmConfig(){
	$("#isAddAlarmRecord").val(0);//判断当前是添加还是修改，0添加，1修改
	$("#consumerInputID").removeClass("hide");
	$("#updateAlarmThresholdForm")[0].reset();
	$("#consumerSearchSelect").selectpicker('refresh');
	$("input[name='ignoreWarn'][value=0]").prop("checked",true);
	$("#updateAlarmThresholdModal").modal('show');
}
</script>